<!-- 添加课表 -->
<template>
	<view class="content">
		<view class="select">
			<view class="select_item" v-for="(value,index) in selectList" :key="index">
				<view class="select_item_left">
					{{value.name}}
				</view>
				
				<!-- 选择年度 -->
				<picker v-if="index === 0" class="select_item_right" mode="selector"  @change="changeYear(index, $event)" :range="yearList" range-key='yearName'>
					<view class="picker">
						<view :class="{font_color:value.selectName != '请选择'}">{{value.selectName}}</view>
						<i class='iconfont icon-fanhui'></i>
					</view>
				</picker>
				
				<!-- 选择周数 -->
				<picker v-if="index === 1" class="select_item_right" mode="selector" @click="touch" @change="changePried(index, $event)" :range="weekList" range-key='weekName'>
					<view class="picker">
						<view :class="{font_color:value.selectName != '请选择'}">{{value.selectName}}</view>
						<i class='iconfont icon-fanhui'></i>
					</view>
				</picker>
				
				<!-- 选择节数 -->
				<picker v-if="index === 2" class="select_item_right" mode="selector" @change="changeKnob(index, $event)" :range="knobList">
					<view class="picker">
						<view :class="{font_color:value.selectName != '请选择'}">{{value.selectName}}</view>
						<i class='iconfont icon-fanhui'></i>
					</view>
				</picker>
				
				<!-- 选择时间 -->
				<view v-if='index === 3' class="select_item_right" @click='linkSelectKnob'>
					<view class="picker">
					<view :class="{font_color:value.selectName != '请选择'}">{{value.selectName}}</view>
					<i class='iconfont icon-fanhui'></i>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="addSchedule">完成创建</view>
		<view class="cs-tip">
			<text>提示：按顺序先选择年度再选周数然后再选节数哦~</text>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config.js'
	export default {
		data() {
			return {
				selectList: [
					{
						name: '年度选择',
						selectName: '请选择'
					},
					{
						name: '周数',
						selectName: '请选择'
					},
					{
						name: '每天节数',
						selectName: '请选择'
					},
					{
						name: '上课时间',
						selectName: '请选择'
					}
				],
				yearList: [],// 年度列表
				weekList: [],// 周数列表
				knobList: ['1节','2节', '3节', '4节', '5节', '6节', '7节', '8节'], // 节数列表
				knobCurrent: 0, // 当前用户所选节数
				stuid: uni.getStorageSync('currentChild').student_id ,// 学生ID
				weekId: null, // 周ID
			}
		},
		// 进去年度列表
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: './period-list'
			})
		},
		
		// 后退（也就是完成创建时将缓存进行清空)
		onBackPress() {
			uni.removeStorageSync('isTimeQuantum')
			uni.removeStorageSync('time_quantum')
			uni.removeStorageSync('knobCurrent')
		},
		
		onShow() {
			// 1. 实时更新有没有新的年度列表
			this.getData('/stuYear/selYearByChoose', {
				stuId: this.stuid,
				reqMethod: 2
			}, 'year')
			
			// 2. 需要时刻监听是否已选择时间，如果有则给出[已设置]提示
			let isTimeQuantum = uni.getStorageSync('isTimeQuantum') || false
			if (isTimeQuantum) {
				this.selectList[3].selectName = '已设置'
			}
		},
		onLoad() {
			// 获取年度
			this.getData('/stuYear/selYearByChoose', {
				stuId: this.stuid,
				reqMethod: 2
			}, 'year')
		},
		methods: {
			/**
			 * 获取数据
			 * @param {String} url		请求地址
			 * @param {Object} obj		请求参数
			 * @param {String} mark		标识符可以区分操作不同的色护具
			 */
			getData(url, obj, mark) {
				this.$capi.apiPost(url, obj).then(res => {
					if (res.data.code == 200) {
						switch(mark) {
							case "year":
								this.yearList = res.data.data
							break;
							case "week":
								this.weekList = res.data.data
								this.weekId = this.weekList[0].weekId // 每次默认拿第一个周ID
							break;
						}
					} else {
						this.yearList = []
						this.weekList = []
					}
				})
			},
			
			// 选择年度
			changeYear(index, e) {
				let current = e.detail.value
				this.selectList[index].selectName = this.yearList[current].yearName
				
				// 用户选择年度后, 进行获取周数
				let yearKey = this.yearList[current].yearKey
				this.getData('/stuWeek/selWeekByChoose', {
					yearKey,
					reqMethod: 2
				}, 'week')
			},
			
			// 选择周数
			changePried(index, e) {
				let current = e.detail.value
				this.selectList[index].selectName = this.weekList[current].weekName
				this.weekId = this.weekList[current].weekId
			},
			
			// 选择节数
			changeKnob(index, e) {
				if (this.weekId === null) return this.showToast('请先选择年度或周数')
				let current = parseInt(e.detail.value) // 获取用户所选节数
				this.knobCurrent = current + 1 // 拿到当前节数要+1，需要传递给选择时间过去选时段用的
				this.selectList[index].selectName = this.knobList[current] // 显示节数标题
			},
			
			// 跳转选择时间  PS：只有当选择节数才可以进去
			linkSelectKnob() {
				if (this.knobCurrent <= 0) return this.showToast('请选择节数')
				
				// 跳转前保存用户选择的节数放到缓存，因为有可能后续跳转回来的时候再次选择了节数，因此需要进行相关判断
				uni.setStorageSync('knobCurrent', this.knobCurrent) 
				// 过去选择时段需要带上周ID，也可以直接将时段放到缓存中，在后退回来就可以进行创建课表
				uni.navigateTo({
					url: `./setcoursesdate?prtchnum=${this.knobCurrent}&weekid=${this.weekId}`
				})
			},
			
			// 完成创建
			addSchedule() {
				let isState = this.selectList.some(item => {
					return item.selectName === '请选择'
				})
				if (isState) {
					return this.showToast('请填写完整课表')
				}
				// 确保用户没有再次选择节数,否则就让他继续选择上课时间
				if (this.knobCurrent !== uni.getStorageSync('knobCurrent')) {
					return this.showToast('请重新选择上课时间')
				}
				
				// 创建时段前需要把周ID加上去以便请求
				let time_quantum = uni.getStorageSync('time_quantum')
				time_quantum.map((item,index) => {
					time_quantum[index].weekId = `${this.weekId}`
				})
				// 1. 开始创建课表，此时点击完成创建需要走创建时段的接口
				// 2. 创建完后进行后退到我的课表
				let that = this
				uni.request({
					url: config.courseUrl + 'stuTime/insertStuTime',
					method: 'post',
					header: {
						"Content-Type": "application/json;charset=UTF-8",
						"token": uni.getStorageSync('token'),
						"reqMethod": "2"
					},
					data: JSON.stringify(time_quantum), // 时段缓存的数据
					success: function(res) {
						if (res.data.code == 400) {
							return that.showToast(res.data.msg)
						}
						that.showToast('创建成功', '1')
						setTimeout(() => {
							uni.setStorageSync('ref_schedule', true) // 刷新我的课表的条件
							uni.navigateBack()
						}, 1000)
					},
					fail(err) {
						that.showToast(res.data.msg)
					}
				})
			},
			
			// 封装吐司
			showToast(title, icon = 'none') {
				uni.showToast({
					title: title,
					icon: icon
				})
			}
		}
	}
</script>

<style>
	.content {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(250, 250, 250, 1);
	}
	.select {
		width: 100%;
		background: rgba(255, 255, 255, 1);
	}

	.select_item {
		width: 92%;
		height: 92upx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
	}
	.select_item_left {
		width: 50%;
		font-size: 32upx;
		color: rgba(51, 51, 51, 1);
	}
	.select_item_right {
		width: 50%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font: 32upx;
		color: rgba(204, 204, 204, 1);
	}
	.select_item_right i {
		font-size: 18upx;
		margin-left: 10upx;
		color: #C2C2C2;
	}
	.select_item:last-child {
		border-bottom: none;
	}

	.btn {
		width: 92%;
		height: 80upx;
		margin: auto;
		background: #FF9900;
		border-radius: 8upx;
		color: #FFFFFF;
		font-size: 34upx;
		line-height: 80upx;
		text-align: center;
		margin-top: 62upx;
	}
	.picker {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.font_color {
		color: #333333;
	}
	
	/* 提示 */
	.cs-tip{
		margin-top: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #C2C2C2;
	}
</style>
